<template>
  <div class="decorate-itemGroup">
    <div class="itemGroup-box" v-if="tplItemData.show_group_search">
      <!-- 搜索框 -->
      <div class="decorate-goodsSearch" style="padding-top:10px;padding-bottom:5px;">
        <div class="search-container">
          <div class="search-wrapper">
            <div class="icon" @click="searchList">
              <img
                class="icon_search"
                src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png"
              />
            </div>
            <input
              @confirm="searchList"
              v-model="keyword"
              type="text"
              placeholder="商品搜索：请输入商品关键字"
            />
          </div>
        </div>
      </div>
      <!-- 分类 -->
      <section class="modulePadding" style="padding-top:5px;padding-bottom:5px;">
        <section class="mlist_nav">
          <span @click="changeClum('')" :class="[order == ''?'cur':'']">默认</span>
          <!-- 价格上 -->
          <span class="icon-list-up cur" v-if="order =='priceUp'" @click="changeClum('priceDown')">
            价格
            <div class="sort-icon">
              <div class="icon up selected"></div>
              <div class="icon down"></div>
            </div>
          </span>
          <!-- 价格下 -->
          <span
            class="icon-list-down cur"
            v-else-if="order == 'priceDown'"
            @click="changeClum('priceUp')"
          >
            价格
            <div class="sort-icon">
              <div class="icon up"></div>
              <div class="icon down selected"></div>
            </div>
          </span>
          <!-- 价格 -->
          <span v-else @click="changeClum('priceUp')">
            价格
            <div class="sort-icon">
              <div class="icon up"></div>
              <div class="icon down"></div>
            </div>
          </span>

          <span class="icon-list-up cur" v-if="order == 'salesUp'" @click="changeClum('salesDown')">
            销量
            <div class="sort-icon">
              <div class="icon up selected"></div>
              <div class="icon down"></div>
            </div>
          </span>
          <span
            class="icon-list-down cur"
            v-else-if="order == 'salesDown'"
            @click="changeClum('salesUp')"
          >
            销量
            <div class="sort-icon">
              <div class="icon up"></div>
              <div class="icon down selected"></div>
            </div>
          </span>
          <span v-else @click="changeClum('salesUp')">
            销量
            <div class="sort-icon">
              <div class="icon up"></div>
              <div class="icon down"></div>
            </div>
          </span>

          <span class="icon-list-up cur" v-if="order == 'newUp'" @click="changeClum('newDown')">
            新品
            <div class="sort-icon">
              <div class="icon up selected"></div>
              <div class="icon down"></div>
            </div>
          </span>
          <span
            class="icon-list-down cur"
            v-else-if="order == 'newDown'"
            @click="changeClum('newUp')"
          >
            新品
            <div class="sort-icon">
              <div class="icon up"></div>
              <div class="icon down selected"></div>
            </div>
          </span>
          <span v-else @click="changeClum('newUp')">
            新品
            <div class="sort-icon">
              <div class="icon up"></div>
              <div class="icon down"></div>
            </div>
          </span>
        </section>
      </section>
    </div>
    <!-- 商品信息 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      finished-text
      @load="onLoad"
    >
      <section class="modulePadding" style="padding-top:5px;padding-bottom:5px;">
        <goods-list :tplItemData="ItemData" :itemPic="itemPic"></goods-list>
      </section>
    </van-list>
  </div>
</template>

<script>
import Vue from "vue";
import goodsList from "../goodsList";
import { getItemGroupLists } from "@/api/item/item";
export default Vue.extend({
  name: "index",
  components: {
    goodsList,
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {};
      },
    },
    itemPic: {
      tpye: String
    },
    itemGroupId: {
      tpye: String
    }
  },
  data() {
    return {
      ItemData: {},
      keyword: "",
      order: "",
      p: 2,
      loading: false,
      error: false,
      finished: false,
      id: "",
      itemGroup_id: ''
    };
  },
  watch: {
    // 实时监听值的改变并赋值
    tplItemData(newValue, oldValue) {
      this.ItemData = newValue
    },
    itemGroupId(newValue, oldValue) {
      this.itemGroup_id = newValue
    },
    deep: true
  },
  created() {
    this.id = this.$route.query.id;
    this.ItemData = this.tplItemData;
    this.itemGroup_id = this.itemGroupId
  },
  mounted() {
    // TODO 小程序触底使用广播监听
    window.$$subscribe("groupReachBottom", () => {
      this.onLoad();
    });
  },
  methods: {
    // 搜索
    searchList() {
      // 清除数据
      this.order = "";
      this.p = 2;
      const data = {
        id: this.id,
        p: 1,
        title: this.keyword,
        supplier: this.$route.query.supplier
      };
      this.finished = false;
      getItemGroupLists(data).then((res) => {
        if (res.status == 1) {
          this.ItemData.goodslist = res.data.list;
        } else {
          this.$Error(res.msg);
        }
      });
    },
    changeClum(order) {
      if (this.order == order) return;
      this.order = order;
      this.keyword = "";
      this.p = 2;
      const data = {
        id: this.id,
        p: 1,
        order: this.order,
        supplier: this.$route.query.supplier
      };
      getItemGroupLists(data).then((res) => {
        if (res.status == 1) {
          this.ItemData.goodslist = res.data.list;
        } else {
          this.$Error(res.msg);
        }
      });
    },
    // 加载更多
    onLoad() {
      if (this.finished) return false;
      const data = {
        id: '',
        p: this.p,
        order: this.order,
        title: this.keyword,
        supplier: this.$route.query.supplier
      }
      if (this.itemGroup_id) {
        data.id = this.itemGroup_id
      } else {
        data.id = this.id
      }
      getItemGroupLists(data).then(res => {
        this.loading = false
        if (res.status == 1) {
          if (res.data.list.length > 0) {
            this.ItemData.goodslist = this.ItemData.goodslist.concat(res.data.list)
            this.p++
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      }).catch(() => {
        this.error = true
      })
    },
  },
});
</script>

<style lang="scss">
@import "src/styles/mixin";
.decorate-itemGroup {
  .decorate-goodsSearch {
    .search-wrapper {
      position: relative;
      width: 100%;
      height: 72px;
      line-height: 72px;
      border-radius: 72px;
      font-size: 0;
      background: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .icon {
        margin-right: 10px;
        height: 40px;
        .icon_search {
          width: 32px;
          height: 32px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width: 100%;
        line-height: 40px;
        height: 40px;
        font-size: 28px;
        padding: 0 10px;
        border: 0;
        background: transparent;
      }
    }
  }
  .mlist_nav {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    padding: 0;
    display: flex;
    span {
      display: block;
      flex: 1;
      display: block;
      color: #666;
      font-size: 26px;
      padding: 18px 0;
      border-bottom: 4px solid #fff;
      margin: 0;
      text-align: center;
      .sort-icon {
        display: inline-block;
        margin-left: 2px;
        .icon {
          width: 12px;
          height: 6px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/public/sort_up.png)
            no-repeat;
          background-size: 100% 100%;
          &.up {
            &.selected {
              background-image: url(https://img.wifenxiao.com/h5-wfx/images/public/sort_up2.png);
            }
          }
          &.down {
            margin-top: 4px;
            background-image: url(https://img.wifenxiao.com/h5-wfx/images/public/sort_down.png);
            &.selected {
              background-image: url(https://img.wifenxiao.com/h5-wfx/images/public/sort_down2.png);
            }
          }
        }
      }
      &.cur {
        color: #f20e25;
        font-weight: bold;
      }
    }
  }
  li {
    position: relative;
    .pic-tips {
      width: 120px;
      height: 80px;
      position: absolute;
      top: 0;
      right: 0;
      img {
        width: 100%;
      }
    }
  }
}
</style>
